<script>
/**
 * @desc 旅游路线查询列表
 */

import { mapState, mapActions } from 'vuex'
import { navTo } from '@/utils'
import SearchBar from './search-bar'
import FilterBar from './filter-bar'
import TravelItem from './travel-item'
import EmptyTips from '@/components/empty-tips'

export default {
  name: 'travel-list',
  components: { SearchBar, FilterBar, TravelItem, EmptyTips },
  computed: { ...mapState('TravelList', ['list', 'hasNext']) },
  methods: {
    navTo,
    ...mapActions('TravelList', ['getList', 'getMore']),

    handleRefresh() {
      wx.showLoading({ title: '加载中...', mask: true })
      this.getList().finally(() => wx.hideLoading())
    },
    handleLoadMore() {
      if (this.hasNext) {
        wx.showLoading({ title: '加载中...', mask: true })
        this.getMore().finally(() => wx.hideLoading())
      }
    }
  },

  mounted() {
    this.getList()
  }
}
</script>

<template>
  <div class="travel-list-container">
    <div id="top-container" class="top-container">
      <search-bar />
      <!-- <filter-bar /> -->
    </div>

    <scroll-view
      scroll-y
      :upper-threshold="-50"
      :lower-threshold="-50"
      @scrolltoupper="handleRefresh"
      @scrolltolower="handleLoadMore"
      class="travel-list-scroll-view"
    >
      <travel-item
        v-if="!!list.length"
        v-for="v in list"
        :key="v.id"
        :data="v"
        :handleClick="()=>navTo({name:'travel-detail',query:{id:v.id}})"
      />

      <empty-tips v-if="!list.length" text="未找到匹配的数据." />
    </scroll-view>
  </div>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
